/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-28 15:21:22
 *
 */
import React, {useContext,useMemo} from 'react';
import {Col, Input, Select, InputNumber} from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import BasicOperate from './BasicOperate';
import ApiModal from './apiModal';

const InputOperate = () => {
    const {
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        formRef,
        currentItem,
        setCurrentItem,
    } = useContext(FormContext);
    const options = useMemo(() => {
        if (currentItem.key === 'textarea') {
            return [{label: '普通文本', value: 1}];
        }
        return [
            {label: '普通文本', value: 1},
            {label: '整数', value: 2},
            {label: '小数', value: 6},
            {label: '邮箱', value: 3},
            {label: '身份证号', value: 4},
            {label: '手机号码', value: 5},
        ];
    }, [currentItem.key]);

    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };

    const changeInfoType = (value: number) => {
        const cloneValue = [...formConTextValue];

        if (value === 2 || value === 6) {
            cloneValue[currentIndex].key = 'inputNumber';
        } else if (options.length === 1) {
            cloneValue[currentIndex].key = 'textarea';
        } else {
            cloneValue[currentIndex].key = 'input';
        }

        if (value === 1) {
            cloneValue[currentIndex].rules = [];
        }
        if (value === 2) {
            cloneValue[currentIndex].rules = [];
            cloneValue[currentIndex].precision = 0;
        }
        if (value === 6) {
            cloneValue[currentIndex].rules = [];
            cloneValue[currentIndex].precision = 2;
        }
        if (value === 3) {
            cloneValue[currentIndex].rules = [
                {
                    pattern:
                        /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请输入正确的邮箱地址',
                },
            ];
        }
        if (value === 4) {
            cloneValue[currentIndex].rules = [
                {
                    pattern: /^4\d{16}[a-zA-Z0-9]$/,
                    message: '请输入正确的身份证号',
                },
            ];
        }
        if (value === 5) {
            cloneValue[currentIndex].rules = [
                {
                    pattern: /^1\d{10}$/,
                    message: '请输入正确的手机号',
                },
            ];
        }
        cloneValue[currentIndex].infoType = value;

        setFormConTextValue(cloneValue);
    };

    return (
        <div className={styles.inputOperate}>
            <div className={styles.currentName}>
                {currentItem.key === 'input' ? '单文本框' : '多文本框'}
            </div>

            {/* 公共配置项 */}
            <BasicOperate>
               { <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>数据类型:</span>
                        <Select
                            options={options}
                            value={currentItem.infoType || 1}
                            onChange={(value) => {
                                changeInfoType(value);
                            }}
                        />
                    </div>
                </Col>}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>默认值:</span>
                        <Input
                            placeholder="请输入"
                            value={currentItem.defaultValue}
                            onChange={(e) => {
                                setValue('defaultValue', e.target.value);
                                formRef?.setFieldValue(
                                    currentItem.name,
                                    e.target.value,
                                );
                            }}
                        />
                    </div>
                </Col>
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>文本框提示语:</span>
                        <Input
                            placeholder="请输入"
                            value={currentItem.placeholder}
                            onChange={(e) => {
                                setValue('placeholder', e.target.value);
                            }}
                        />
                    </div>
                </Col>
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>数据获取方式:</span>
                        <Select
                            value={currentItem.infoCome}
                            options={[
                                {label: '手动录入', value: 0},
                                {label: '接口获取', value: 1},
                            ]}
                            onChange={(value: 0 | 1) => {
                                setValue('infoCome', value);
                            }}
                        />
                    </div>
                </Col>
                {currentItem.infoCome === 1 && (
                    <Col span={24}>
                        <div className={styles.operateItem}>
                            <span className={styles.itemName}>接口配置:</span>
                            <ApiModal />
                        </div>
                    </Col>
                )}
                {/* 字数限制 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>字数限制:</span>
                        <InputNumber
                            value={currentItem.maxLength}
                            min={0}
                            max={200}
                            onChange={(value) => {
                                setValue('maxLength', value);
                            }}
                        />
                    </div>
                </Col>
            </BasicOperate>
        </div>
    );
};

export default InputOperate;
